<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<link type="text/css" href="css/calendar/ui.all.css" rel="stylesheet" />
<link type="text/css" href="css/calendar/demos.css" rel="stylesheet" />
<script type="text/javascript" src="js/calendar/ui.core.js"></script>
<script type="text/javascript" src="js/calendar/ui.datepicker.js"></script> 
<script type="text/javascript">
<!--//

$(function() {
	$('#datepicker').datepicker({
		changeMonth: true,
		changeYear: true,
		yearRange: '1970:1990'
	});		
});

function moveMain() {
	frmObj = document.frm; 
	frmObj.action = "/edu/index.action";
	frmObj.submit();
}



function chkValue() {
	
 	if(!$("#id").val()) {
		alert("input your id.");
		$("#id").focus();
		return false;	
	}
	if($("#idCheck").val() == 0) {
		alert("check id duplicated.");
		$("#idCheck").focus();
		return false;	
	}
	if(!$("#password").val()) {
		alert("input your password.");
		$("#password").focus();
		return false;	
	}
	if(!$("#re_password").val()) {
		alert("retype password.");
		$("#re_password").focus();
		return false;	
	}else if($("#password").val() != $("#re_password").val()){
		alert("you must type re_password such as password.");
		$("#re_password").val("");
		$("#re_password").focus();
		return false;
	}
	if(!$("#name").val()) {
		alert("input your name.");
		$("#name").focus();
		return false;	
	}
	if(!$("#nationality").val()) {
		alert("input your nation.");
		$("#nationality").focus();
		return false;	
	}  
	if(!$("#datepicker").val()) {
		alert("select your birth on the calendar.");
		$("#birth").focus();
		return false;	
	}else{
		$("#birth").val($("#datepicker").val());
	}
	if(!$("input[name=bg_knowledge]").is(":checked")){
		alert("check background knowledge.");
		return false;	
	}else if($("input[name=bg_knowledge]:checked").length > 3){
		alert("check background knowledge.maximun 3ea.");
		return false;
	}
	if(!$("#image_url").val()) {
		alert("upload your profile image.");
		return false;	
	} 

	//var params = $("#frm").serialize();
	//alert("폼객체값확인 : " + params);

	return true;
	//return false;
} 


function chkDupId() { 
	//alert("use db access, check id dup. and idCheck value is '1'");
	$("#idCheck").val("1");
	
	alert($("#id").val()+" dup check ok.");
	/*
	$.ajax({
				
		type: "GET",
		async: true,
		url : "/edu/checkIdDuplication.action?id=banhong",
		dataType: "xml",
		timeout: 20000,
		cache: false,
		contentType: "application/x-www-urlencoded; charset=UTF-8",
		
		success: function() {
			$("#dupCheckResult").append(response);
		},
		
		error: function() {
			alert("code : "+request.status + "\r\message : "+request.responseText);
		},
		
		beforeSend: function(){
			alert("before a start");
		},
		
		complete: function(){
			alert("finished");
		}
	});
	*/
	
}	

$("#btn_idCheck").click(function(){
	$.ajax({
		
		type: "GET",
		async: true,
		url : "/edu/checkIdDuplication.action",
		dataType: "xml",
		timeout: 20000,
		cache: false,
		data : $("#frm").serialize(),
		contentType: "application/x-www-urlencoded; charset=UTF-8",
		
		success: function() {
			$("#dupCheckResult").append(response);
		},
		
		error: function() {
			//$("#ajaxIndicator").fadeOut();
			alert("code : "+request.status + "\r\message : "+request.responseText);
		},
		
		beforeSend: function(){
			$("#ajaxIndicator").show().fadeIn("fast");
			alert("before a start");
			
		},
		
		complete: function(){
			$("#ajaxIndicator").fadeOut();
			alert("finished");
			
		}
	});

});


//-->
</script>    
<div style="margin:auto; text-align:center;">
	<!--// 컨텐츠 영역 -->
	<div id="mainContainer">
<!-- //##### Contents START ############################# --> 
		<div id="title" style="text-align:left; padding-left:5px;">
			<h3> 　join MemberShip </h3>
			<hr size="1" width="90%" style="color:#dfdfdf;" >
		</div>
		<div id="joinForm">
		<form id="frm" name="frm" method="post" action="/edu/joinMember.action" onsubmit="return chkValue();" >
		<table id="joinTbl" border="1" style="width:100%; text-align:left;">
			<colgroup><col width="15%"><col width="25%"><col width="15%"><col width="25%"><col width="20%"></colgroup>  
			<tr>
				<td>ID</td>
				<td colspan="3">
					<input type="text" id="id" name="id" />&nbsp;
					<input type="button" id="btn_idCheck" name="btn_idCheck" value="check" onclick="chkDupId();" />
					<img src="images/ajax-loader.gif" id="ajaxIndicator" name="ajaxIndicator" style="width:19px; height:19px; display:none;">
					<span id="dupCheckResult" name="dupCheckResult">::<s:property value="idDupCnt"/>::</span>
					<input type="hidden" id="idCheck" name="idCheck" value="0" />
				</td>
				<td rowspan="6" style="text-align:center;">
					<iframe name="hiddenframe" src="jsp/join/frameUploadProfile.jsp" frameborder="0" style="width:100%; height:200px; overflow:hidden"></iframe>
				</td>
			</tr>
			<tr>
				<td>Password</td>
				<td>
					<input type="password" id="password" name="password" />&nbsp;
					<label id="pwd_lbl"></label>
				</td>
				<td>Retype Password</td>
				<td>
					<input type="password" id="re_password" name="re_password" />&nbsp;
					<label id="chkPwd_lbl"></label>
				</td>
			</tr>
			<tr>
				<td>Name</td>
				<td><input type="text" id="name" name="name" /></td>
				<td>Nationality</td>
				<td>
					<select id="nationality" name="nationality" >
						<option value="01">China</option>
						<option value="02" selected>Japan</option>
						<option value="03">Korea</option>
					</select>				
				</td>
			</tr>
			<tr>
				<td>Gender</td>
				<td><input type="radio" name="gender" value="01" checked />&nbsp;Male<br>
					<input type="radio" name="gender" value="02" />&nbsp;Female
				</td>
				<td>Birth</td>
				<td><input type="text" id="datepicker"><input type="hidden" id="birth" name="birth"></td>
			</tr>
			<tr>
				<td>Major</td>
				<td colspan="3" style="font-size:13pt; color:red;">&nbsp; Information Science</td>
			</tr>
			<tr>
				<td>Degree</td>
				<td colspan="3">
					<input type="radio" name="degree" value="01" checked />&nbsp;a bachelor　　　
					<input type="radio" name="degree" value="02" />&nbsp;a master　　　
					<input type="radio" name="degree" value="03" />&nbsp;a ph.D　
					<!-- profile image's full path info -->
					<input type="hidden" id="image_url" name="image_url" />
				</td>
			</tr>
			<tr>
				<td>Background<br>Scholarship</td>
				<td colspan="4">
					<input type="radio" name="bg_scholarship" value="01" checked />&nbsp;Completed Information or Computer Science / Engineering  school<br>
					<input type="radio" name="bg_scholarship" value="02" />&nbsp;Completed another Science / Engineering school<br>
					<input type="radio" name="bg_scholarship" value="03" />&nbsp;Completed non-Science / Engineering school
				</td>
			</tr>
			<tr>
				<td>Background<br>Knowledge</td>
				<td colspan="4">
					<h3>Select lectures which finished the before degree course(max:3ea)</h3>
					<table style="width:90%;">
					<colgroup><col width="50%"><col width="50%"></colgroup>
						<tr>
							<td><input type="checkbox" name="bg_knowledge" value="01" />&nbsp;Algorithm / Data Structure</td>
							<td><input type="checkbox" name="bg_knowledge" value="02" />&nbsp;Capstone Design or Programming Laboratory</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="bg_knowledge" value="03" />&nbsp;Operating System</td>
							<td><input type="checkbox" name="bg_knowledge" value="04" />&nbsp;Human Interface</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="bg_knowledge" value="05" />&nbsp;Artificial Intelligence</td>
							<td><input type="checkbox" name="bg_knowledge" value="06" />&nbsp;Programming</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="bg_knowledge" value="07" />&nbsp;Database</td>
							<td><input type="checkbox" name="bg_knowledge" value="08" />&nbsp;Software Architecture</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="bg_knowledge" value="09" />&nbsp;Computer Architecture</td>
							<td><input type="checkbox" name="bg_knowledge" value="10" />&nbsp;Network</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="bg_knowledge" value="11" />&nbsp;Computer Graphics</td>
							<td><input type="checkbox" name="bg_knowledge" value="12" />&nbsp;Software Engineering</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="bg_knowledge" value="13" />&nbsp;Embedded System</td>
							<td><input type="checkbox" name="bg_knowledge" value="14" />&nbsp;Security</td>
						</tr>
					</table>
				</td>
			</tr>	
			<tr>
				<td>Language</td>
				<td colspan="4">
				<table>
					<colgroup><col width="20%"><col width="80%"></colgroup>
					<tr>
						<td>Japanese</td>
						<td>&nbsp;:&nbsp; 
						<select id="j_language_level" name="j_language_level" >
							<option value="0" selected>Lv0 - Never know</option>
							<option value="1">Lv1 - JLPT N5</option>
							<option value="2">Lv2 - JLPT N4</option>
							<option value="3">Lv3 - JLPT N3</option>
							<option value="4">Lv4 - JLPT N2</option>
							<option value="5">Lv5 - JLPT N1</option>
							<option value="6">Lv6 - Lived in Japan for 1 year</option>
							<option value="7">Lv7 - Lived in Japan for 3 years</option>
							<option value="8">Lv8 - Have Japanese nationality</option>
						</select>
						</td>
					</tr>
					<tr>
						<td>English</td>
						<td>&nbsp;:&nbsp;
						<select id="e_language_level" name="e_language_level" >
							<option value="0" selected>Lv0 - Never know</option>
							<option value="1">Lv1 - TOEIC 300~400</option>
							<option value="2">Lv2 - TOEIC 400~500</option>
							<option value="3">Lv3 - TOEIC 500~600</option>
							<option value="4">Lv4 - TOEIC 700~800</option>
							<option value="5">Lv5 - TOEIC 800~990</option>
							<option value="6">Lv6 - Lived in English culture country for 1 year</option>
							<option value="7">Lv7 - Lived in English culture country for 3 years</option>
							<option value="8">Lv8 - From English culture</option>
						</select>
						</td>
					</tr>												
				</table>
				</td>
			</tr>
		</table>
		<br>
		<input type="submit" value="Submit">&nbsp;　　&nbsp;
		<input type="button" value="Cancel" onclick="moveMain();">		
		</form>
		</div>
		
<!-- //##### Contents END ############################# -->
	</div>
	<!--// 컨텐츠 영역 -->
</div>